<template>
  <div>
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-distance="30"
      :infinite-scroll-immediate-check="true"
    >
      <p class="row" v-for="i in n" :key="i">一行文本.. {{ i }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      n: 10,
      isLoading: false, //用于表示数据是否正在加载中
    };
  },
  methods: {
    loadMore() {
      if (this.isLoading) {
        return; // 如果请求正在发送中, 那么就不再执行后续业务
      }
      this.isLoading = true;
      console.log("到底了...");
      // 模拟发一个请求, 5秒后得到结果
      window.setTimeout(() => {
        this.n += 20;
        this.isLoading = false;
      }, 5000);
    },
  },
};
</script>

<style scoped>
.row {
  margin: 0px 10px;
  border-bottom: 1px solid #999;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
</style>